<template>
  <div>
    <div class="row-header" :style="{'overflow-x':$store.state.app.screenWidth<450?'scroll':'auto'}">
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-caret-bottom" v-if="roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER'" @click.prevent="showListHandle = !showListHandle">高级查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-news" @click="exportExcel">导出EXCEL</el-button>
      </div>
      <el-collapse-transition v-if="showListHandle" :style="{'margin-top': $store.state.app.screenWidth<450&&showListHandle?'200px':'0'}">
        <el-form :model="form" :rules="formRules" label-width="50px" inline>
          <el-form-item label=" " prop="telephoneSearch">
            <el-input size="small" v-model="form.telephoneSearch" placeholder="请输入联系电话" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label=" " >
            <el-select size="small" v-model="dictStatusSearch" placeholder="请选择客户状态" style="width: 300px;" v-if="roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER'">
              <el-option v-for="dictStatus in dictStatusSelect" :key="dictStatus.value" :label="dictStatus.label"
                         :value="dictStatus.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" " >
            <el-select size="small" v-model="dictAgentTypeSearch" placeholder="请选择客户类型" style="width: 300px;">
              <el-option v-for="dictAgentType in dictAgentTypeSelect" :key="dictAgentType.value"
                         :label="dictAgentType.label" :value="dictAgentType.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" " >
            <el-select size="small" v-model="agentRangeSearch" placeholder="请选择客户范围" style="width: 300px;">
              <el-option v-for="agentRange in agentRangeSelect" :key="agentRange.value" :label="agentRange.label"
                         :value="agentRange.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" " >
            <el-select size="small" v-model="weChatTypeSearch" placeholder="请选择秒返绑定状态" style="width: 300px;">
              <el-option v-for="item in weChatTypeOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="sale" label=" " >
            <el-select v-model="employeeId" placeholder="请选择业务员" style="width: 300px;" size="small">
              <el-option v-for="employee in employeeForSelect"
                         :key="employee.value"
                         :label="employee.label"
                         :value="employee.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-transition>
      <el-form label-width="50px" :style="{'width': $store.state.app.screenWidth<450?'400px':'100%'}" :inline="true">
        <el-form-item label=" ">
          <el-autocomplete class="inline-input" size="small" v-model="loginNameSearch" style="width: 300px;"
                           :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect"
                           placeholder="请输入代理账号"></el-autocomplete>
        </el-form-item>
        <el-form-item label=" ">
          <el-select v-model="reviewType" style="width: 300px;">
            <el-option v-for="item in reviewTypeOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!--v-if="showListHandle"-->
      <div class="row-form-btn" >
        <el-button type="shenda" size="small" icon="el-icon-search" @click="initData">查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-refresh-right" @click="clearForm">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main" :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
      <el-button type="shenda" size="small" @click="toEdit(user)" v-has="'userEditPermission'" icon="el-icon-plus">增加客户</el-button>
      <el-button type="shenda" size="small" @click="getAgentSettlementList" v-has="'bathPowerEdited'" icon="el-icon-receiving">设置/取消批量充值权限</el-button>
<!--      <div class="row-block-ddd" :style="{'overflow-x':$store.state.app.screenWidth<992?'scroll':'auto',width:$store.state.app.screenWidth<992?'100%':'auto'}">-->
<!--        <div class="row_top_item">-->
<!--          <el-button type="shenda" round size="small"><b>代理余额总计：</b><span class='btn_text'>{{ sumbalance }}</span></el-button>-->
<!--        </div>-->
<!--      </div>-->
      <el-table v-has="'agentDataTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" @sort-change="sortChange"
                :data="tableData" tooltip-effect="dark"  @selection-change="handleSelectionChange"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                ref="singleTable" :default-sort="{prop: 'insertTime', order: 'descending'}" class="row-main-table">
        <el-table-column prop="id" type="selection" align="center" fixed="true" :width="$store.state.app.screenWidth<992?'80px':'auto'" v-has="'bathPowerEdited'"></el-table-column>
        <el-table-column prop="loginName" label="客户账号" sortable="custom" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="dictAgentTypeName" label="客户类型" sortable="custom" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="dictRealNameName" label="实名类型" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" v-if="roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER'"></el-table-column>
        <el-table-column prop="dictStatusName" label="代理状态" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" v-if="roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER'"></el-table-column>
        <el-table-column prop="pidName" label="所属关系" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="employeeName" label="业务员" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="telephone" label="客户电话" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="alipayName" label="支付宝户名" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="alipayLoginName" label="支付宝账户" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>

        <el-table-column prop="openid" label="是否绑定秒返" align="center" v-if="roleChar==='OEM_ADMIN'" :width="$store.state.app.screenWidth<992?'130px':'auto'">
          <template slot-scope="scope">
            <span v-if="scope.row.openid">已绑定</span>
            <span v-else>未绑定</span>
          </template>
        </el-table-column>
        <el-table-column prop="dictAuditStatus" label="审核状态" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'">
          <template slot-scope="scope">
            <!--            待审核 通过-->
            <span v-if="scope.row.dictAuditStatus=='C_THROUGH'">
              <el-tooltip class="item" effect="dark" content="已通过" placement="top">
                <i class="el-icon-user-solid" style="color: green"></i>
              </el-tooltip>
            </span>
            <span v-if="scope.row.dictAuditStatus=='C_WAIT'||scope.row.dictAuditStatus=='C_REFUSE'">
               <el-tooltip class="item" effect="dark" content="待审核" placement="top">
                <i class="el-icon-user-solid" style="color: darkgrey "></i>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="notReason" label="备注" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column sortable="custom" prop="balance" label="余额" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" v-if="roleChar=='OEM_ADMIN'||roleChar=='OEM_OTHER'"></el-table-column>
        <el-table-column sortable="custom" prop="insertTimeDate" label="添加时间" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="name" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="getUser(scope.row)" v-has="'lookAccountPer'">账户查看</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="reviewUser(scope.row)" v-if="scope.row.dictAuditStatus=='C_WAIT'||scope.row.dictAuditStatus=='C_REFUSE'" v-has="'userReview'">账户审核</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="showChangePasswordForm(scope.row)"
                             v-has="'showChangePasswordForm'">重置密码
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="toEdit(scope.row)" v-has="'userEditPermission'">账户编辑</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="showRechargeForm(scope.row)" v-has="'showRechargeForm'">账户充值</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="toRecord(scope.row)" v-has="'userRecordPer'">交易记录</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="showStopUserForm(scope.row)"
                             v-show="scope.row.dictStatus === 'NORMAL'" v-has="'showStopUserForm'">停用账户
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="showActiveUserForm(scope.row)"
                             v-show="scope.row.dictStatus === 'DISABLED'" v-has="'showStopUserForm'">启用账户
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="toRate(scope.row)" v-has="'rateUserPer'"
                             v-show="scope.row.pId == '0' || oemFlag != 'OEM'">设置费率
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="viewLowerLevel(scope.row)" v-has="'viewLowerLevel'">查看下级
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="toCard(scope.row)" v-has="'CardUserPer'">查看卡片</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="openBatchRechargePermissionForUser(scope.row)"
                             v-has="'showBatchRechargeForm'">开启批量
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button class="operation" type="text" @click="shutDownBatchRechargePermissionForUser(scope.row)"
                             v-has="'showBatchRechargeForm'">关闭批量
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item >
                  <router-link :to="{path: '/settings/agentSignAgreementRecords',query:{'agentId': scope.row.id}}"><el-button class="operation" type="text" v-preventReClick v-has="'agreementReviewPer'">协议签署审核</el-button></router-link>
                </el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
    <!--账户查看-->
    <el-dialog class="accountView" title="账户查看" top="20vh" :visible.sync="operation.accountView" :append-to-body="true"
               :width="$store.state.app.screenWidth<500?'100%':'500px'">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="客户姓名">
          <el-input v-model="personalData.checkAgentName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="personalData.checkTelephone" size="small"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="personalData.checkEmail" size="small"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="personalData.checkAddress" size="small"></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="personalData.checkBalance" size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="operation.accountView = false" size="small" type="primary">关 闭</el-button></span>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog class="resetPassword" title="重置密码" top="33vh" :visible.sync="operation.resetPassword"
               :append-to-body="true" :width="$store.state.app.screenWidth<500?'100%':'500px'">
      <span>将会把{{ agentNameForPassword }}管理员的密码重置为初始密码，您确认需要重置密码吗？</span><span
      class="dialog-footer" slot="footer">
      <el-input type="hidden" v-model="idForPassword"></el-input>
      <el-button @click="operation.resetPassword = false" size="small">取 消</el-button>
      <el-button type="primary" @click="changeUserPassword()" size="small"
                 v-preventReClick>确 定</el-button></span></el-dialog>
    <!--账户充值-->
    <el-dialog class="accountRecharge" title="账户充值" top="28vh" :visible.sync="operation.accountRecharge"
               :append-to-body="true" :width="$store.state.app.screenWidth<500?'100%':'500px'">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="充值金额" >
          <el-input size="small" v-model="transactionMoney"></el-input>
        </el-form-item>
        <el-form-item label="交易途径">
          <el-radio v-model="dictMethod" label="WX">微信</el-radio>
          <el-radio v-model="dictMethod" label="ZFB">支付宝</el-radio>
          <el-radio v-model="dictMethod" label="XJ">银行卡</el-radio>
          <!--el-radio(v-model="dictMethod" label="WX" name="微信")-->
          <!--el-radio(v-model="dictMethod" label="ZFB" name="支付宝")-->
          <!--el-radio(v-model="dictMethod" label="XJ" name="银行卡")-->
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" size="small" v-model="remark"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-input type="hidden" v-model="idForRecharge"></el-input>
      <el-input type="hidden" v-model="transactionType"></el-input>
      <el-input type="hidden" v-model="beforBalance"></el-input>
      <el-button @click="operation.accountRecharge = false" size="small">取 消</el-button>
      <el-button type="primary" @click="recharge()" size="small" v-preventReClick>确 定</el-button></span>
    </el-dialog>
    <!--停用账户-->
    <el-dialog class="deactivate" title="停用账户" top="33vh" :visible.sync="operation.deactivate" :append-to-body="true"
               :width="$store.state.app.screenWidth<500?'100%':'500px'">
      <span>如果停用此账户，则会对该账户停止返佣以及停止该账户在系统下的所有权限，确认停用该账户吗？</span>
      <span class="dialog-footer" slot="footer">
      <el-input type="hidden" v-model="idForStopUser"></el-input>
      <el-button @click="operation.deactivate = false" size="small">取 消</el-button>
      <el-button type="primary" @click="stopUser()" size="small">确 定</el-button></span></el-dialog>
    <el-dialog class="activate" title="启用账户" top="33vh" :visible.sync="operation.activate" :append-to-body="true"
               width="30%"><span>确定启用账户吗？</span><span class="dialog-footer" slot="footer">
      <el-input type="hidden" v-model="idForActiveUser"></el-input>
      <el-button @click="operation.activate = false" size="small">取 消</el-button>
      <el-button type="primary" @click="activeUser()" size="small">确 定</el-button></span></el-dialog>
    <el-dialog class="cardDetail" title="卡片详情" top="10vh" :visible.sync="operation.agentNameHandle" width="30%"
               :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="业务号码">
          <el-input v-model.trim="personalData.checkAgentName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="ICCID">
          <el-input v-model.trim="personalData.checkTelephone" size="small"></el-input>
        </el-form-item>
        <el-form-item label="运营商">
          <el-input v-model="personalData.checkEmail" size="small"></el-input>
        </el-form-item>
        <el-form-item label="自带套餐">
          <el-input v-model="personalData.checkAddress" size="small"></el-input>
        </el-form-item>
        <el-form-item label="首充时间">
          <el-input v-model="personalData.checkBalance" size="small"></el-input>
        </el-form-item>
        <el-form-item label="过期时间">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="累积流量">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="认证">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="轮询">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="扣费">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="扣费时间">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="激活">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="套餐">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="断网">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="上网功能">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
        <el-form-item label="实名文件">
          <el-input v-model="personalData.checkDictStatus" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
      <el-button @click="operation.agentNameHandle = false" size="small">关闭</el-button></span>
    </el-dialog>
    <el-dialog
      title="设置 / 取消批量充值权限"
      :visible.sync="showAgentListDialog"
      :width="$store.state.app.screenWidth<500?'100%':'500px'"
      center>
      <el-form :model="agentForm" ref="agentForm" label-width="100px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="代理账号" prop="loginName">
              <el-autocomplete class="inline-input" size="small" v-model="agentForm.loginName" style="width: 90%;"
                               :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect"
                               placeholder="请输入代理账号">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="代理类型" prop="agentType">
              <el-select size="small" v-model="agentForm.agentType" placeholder="请选择客户类型" style="width: 90%;">
                <el-option v-for="item in dictAgentTypeSelect" :key="item.value"
                           :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系电话" prop="telephone">
              <el-input v-model="agentForm.telephone" style="width: 90%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="small" @click="getAgentSettlementList">查询</el-button>
          </el-col>
        </el-row>
        <div class="transformBlock">
          <!--          <div class="transformTable">-->
          <!--            -->
          <!--          </div>-->
          <transform :list="agentSettlementList" :len="num1"></transform>
          <!--<div class="transformHead">
            <el-checkbox v-model="agentAllChecked" @change="selectAllAgent">全部代理</el-checkbox>
            <div style="color: #888;display: inline-block;font-size: 10px;float: right">{{num2}}/{{num1}}</div>
          </div>
          <div class="transformList">
            <div v-for="(item,index) in agentSettlementList" class="transformItem" v-if="!item.hidden">
              <input type="checkbox" :id="'checkbox'+item.id" @click="changeCheckbox($event,item)" :checked="item.checked" />
              <span :style="{'color':item.checked?'#409eff':'#666'}">{{item.label}}</span>
            </div>
          </div>
        </div>
        <div style="width:160px;display: flex;flex-direction: row;align-items: center;justify-content: space-around">
          <el-button type="primary" @click="subList" icon="el-icon-arrow-left"></el-button>
          <el-button type="primary" @click="addList" icon="el-icon-arrow-right"></el-button>
        </div>
        <div class="transformTable">
          <div class="transformHead">
            <el-checkbox v-model="agentAllChoosed" @change="selectAllAgentSelect">已选择代理</el-checkbox>
            <div style="color: #888;display: inline-block;font-size: 10px;float: right">{{num4}}/{{num3}}</div>
          </div>
          <div class="transformList">
            <div v-for="(item,index) in agentSettlementList" class="transformItem" v-if="item.hidden">
              <input type="checkbox" :id="'checked'+item.id" @click="changeSelectbox($event,item)" :checked="item.checked" />
              <span :style="{'color':item.checked?'#409eff':'#666'}">{{item.label}}</span>
            </div>
          </div>
        </div>-->
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="setPower(true)">关闭批量充值权限</el-button>
          <el-button type="primary" @click="setPower(false)">启用批量设置权限</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="用户身份审核"
      :visible.sync="showUserReviewDialog"
      width="50%"
      center>
      <div>
        <el-form :model="userForm" ref="userForm" :rules="userFormRules" label-width="150px">
          <el-form-item prop="userName" label="用户名"><span>{{userForm.userName}}</span></el-form-item>
          <el-form-item prop="userPhone" label="手机号">{{userForm.userPhone}}</el-form-item>
          <el-form-item prop="userLicence" label="手持身份证">
            <img :src="userForm.userHandLicence" v-image-preview/>
          </el-form-item>
          <el-form-item label="身份证正面照">
            <img :src="userForm.userFrontLicence" v-image-preview/>
          </el-form-item>
          <el-form-item label="身份证反面照"><img :src="userForm.userBackLicence" v-image-preview style="width: 80%;height: auto"/></el-form-item>
          <el-form-item label="营业执照" v-if="userForm.userLicence"><img :src="userForm.userLicence" v-image-preview/></el-form-item>
          <el-form-item prop="dictAuditStatus" label="是否通过">
            <el-radio-group v-model="userForm.dictAuditStatus">
              <el-radio-button label="C_THROUGH">通过</el-radio-button>
              <el-radio-button label="C_REFUSE">不通过</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="notReason" label="不通过原因" v-if="userForm.dictAuditStatus=='C_REFUSE'" >
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="userForm.notReason"
              maxlength="255"
              :rows="7"
              style="width: 500px"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showUserReviewDialog = false">关  闭</el-button>
          <el-button type="primary" @click="submitUserReview('userForm')" v-preventReClick>提  交</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>
import {userManagement, activeUser, reviewUserStatus,accountAgentBalance} from "@/api/getData";
import {getUser} from "@/api/getData";
import {changeUserPassword} from "@/api/getData";
import {recharge} from "@/api/getData";
import {
  initEmployeeSelect,
  stopUser,
  selectIsOEMFlag,
  getLoginName,
  openBatchRechargePermissionForUser,
  shutDownBatchRechargePermissionForUser,
  agentListInnit,
  setAgentbatchRechargPower,

} from "@/api/getData";
import transform from '@/components/Transform/transform'
import {setSessionStore} from "@/config/mUtils";

export default {
  name: "User",
  components: {transform},
  data() {
    return {
      userFormRules: {
        notReason: [
          {required: true, message:'请填写不通过原因', trigger: 'blur'}
        ]
      },
      userForm: {
        id: '',
        userName: '',
        userPhone: '',
        userLicence: '',
        userFrontLicence: '',
        userBackLicence: '',
        userHandLicence: '',
        dictAuditStatus: 'C_REFUSE',
        notReason: '',
      },
      formRules: {
        telephoneSearch: [
          {
            pattern: /^\d{1,18}$/,
            message: "联系电话必须是数字且不能超过18位",
            trigger: "blur"
          }
        ]
      },
      idForStopUser: "",
      idForActiveUser: "",
      tableLoading: false,
      dictMethod: "",
      beforBalance: "",
      transactionType: "RECHARGE",
      transactionMoney: "",
      remark: "",
      idForRecharge: "",
      idForPassword: "",
      agentNameForPassword: "",
      dictAgentTypeSearch: "",
      reviewTypeOptions:[
        { value: '', label: '请选择审核状态' },
        { value: 'C_THROUGH', label: '已通过' },
        { value: 'C_WAIT', label: '待审核' },
      ],
      reviewType: '',
      dictAgentTypeSelect: [
        {
          value: "",
          label: "请选择客户类型"
        },
        {
          value: "AGENT_TYPE_RETURN_MONEY",
          label: "普通代理"
        },
        {
          value: "AGENT_TYPE_NO_RETURN_MONEY",
          label: "无返佣代理"
        },
        {
          value: "COMPANY_CUSTOMER",
          label: "企业级客户"
        },
        /*{
          value: "API_AGENT",
          lable: "API代理"
        }*/
      ],
      dictStatusSearch: "NORMAL",
      dictStatusSelect: [
        {
          value: "",
          label: "请选择客户状态"
        },
        {
          value: "DISABLED",
          label: "停用"
        },
        {
          value: "NORMAL",
          label: "正常"
        }
      ],
      agentRangeSearch: "",
      agentRangeSelect: [
        {
          value: "all",
          label: "所有代理"
        },
        {
          value: "directly",
          label: "直属代理"
        }
      ],
      weChatTypeOptions: [
        {
          value: "",
          label: "请选择秒返绑定状态"
        },
        {
          value: "C_YES",
          label: "已绑定"
        },
        {
          value: "C_NO",
          label: "未绑定"
        }
      ],
      agentNameSearch: null,
      loginNameSearch: "",
      telephoneSearch: null,
      weChatTypeSearch: null,
      telephoneSearchSelect: [],
      operation: {
        agentNameHandle: false,
        accountView: false,
        resetPassword: false,
        accountRecharge: false,
        deactivate: false,
        activate: false
      },
      showListHandle: false,
      value: false,
      form: {
        region: "",
        telephoneSearch: ""
      },
      options: "",
      pageSize: 10,
      currentPage: 1,
      total: 0,
      ascs: [],
      descs: ["insertTime"],
      maxPage: 1,
      account: {
        name: ""
      },
      telephone: {
        num: ""
      },
      tableData: [],
      multipleSelection: [],
      searchLoading: false,
      oemFlag: "",
      personalData: {},
      pagekey: '',
      pid: '',
      roleChar: '',
      employeeForSelect: [],
      employeeId: '',
      showAgentListDialog: false,
      agentForm: {
        loginName: '',
        agentType: '',
        telephone: '',
      },
      agentSettlementList: [],
      agentArray: [],
      agentSelectedList: [],//已选择用户列表
      agentAllChecked: false,
      agentAllChoosed: false,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      loading: true,//加载所有代理时的loading
      showUserReviewDialog: false,
      sumbalance: 0,  //代理余额统计
    };
  },
  async mounted() {
    this.roleChar = localStorage.getItem("roleChar");
    let item = sessionStorage.getItem(this.$route.path);
    if(item){
      this.showListHandle = true;
      this.getSession(item)
    }
    else{
      this.initData();
    }

    await this.selectIsOEMFlag();
    await this.initEmployeeSelect();
    // await this.accountAgentBalance();
  },
  methods: {
    async reviewUser(row){
      this.userForm.id = row.id;
      this.userForm.userName = row.loginName;
      this.userForm.userPhone = row.telephone;
      this.userForm.userLicence = row.certificatesThree;
      this.userForm.userFrontLicence = row.certificatesOne;
      this.userForm.userBackLicence = row.certificatesTwo;
      this.userForm.userHandLicence = row.certificatesFour;
      this.userForm.notReason = '';
      this.userForm.dictAuditStatus = 'C_REFUSE';
      this.showUserReviewDialog = true;
      this.pagekey = await this.$getPageKey();
    },
    //审核代理身份是否通过
    submitUserReview(form){

      this.$refs[form].validate((valid) =>{
        if(valid){
          let tip = '';
          switch (this.userForm.dictAuditStatus){
            case 'C_REFUSE':
              tip = '是否确定拒绝通过当前用户的信息审核？';
              break;
              case 'C_THROUGH':
                tip = '是否通过当前用户的信息审核？';
                break;
          }
          this.$confirm(tip, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res = await reviewUserStatus({
              dictAuditStatus: this.userForm.dictAuditStatus,
              notReason: this.userForm.notReason,
              id: this.userForm.id,
              pagekey: this.pagekey
            })
            this.showUserReviewDialog = false;
            if(res._result){
              this.initData();
              if(res.code==10000){
                this.$message({
                  type: 'success',
                  message: '审核结果提交成功'
                })
              }
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });

        }
      })
    },
    //统计代理余额
    accountAgentBalance(){
      accountAgentBalance({}).then(res=>{
        if(res.code == 10000){
          this.sumbalance = res.data.sumbalance
        }
      })
    },
    async exportExcel(theKey) {
      this.tableLoading = true;
      this.loading = true;

      let obj = {
        loginName: this.loginNameSearch,
        dictAgentType: this.dictAgentTypeSearch,
        dictStatus: this.dictStatusSearch,
        agentRange: this.agentRangeSearch,
        telephone: this.form.telephoneSearch,
        account: this.account.name,
        page: {
          current: 1,
          size: this.total,
          ascs: this.ascs,
          descs: this.descs
        }
      };
      let list = [];
      let filterVal = [];
      let arr = [...this.$refs.singleTable.columns];
      for (let item of arr) {
        list.push(item.label);
        filterVal.push(item.property);
      }
      list.pop();
      filterVal.pop();

      this.tableLoading = false;
      this.loading = false;
      let info = {
        api: 'userManagement',
        name: '客户管理列表'
      };
      const {href} = this.$router.resolve({
        path: '/exl/exlDownload',
        query: {
          list: JSON.stringify(list),
          filterVal: JSON.stringify(filterVal),
          obj: JSON.stringify(obj),
          info: JSON.stringify(info),
        }
      });
      window.open(href, '_blank');
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async querySearch(queryString, cb) {
      let a = await getLoginName({
        loginname: this.loginNameSearch
      });
      if (a._result) {
        this.loginNames = [];
        for (let i = 0; i < a.data.length; i++) {
          this.loginNames.push({value: a.data[i]});
        }
      }

      var loginNames = this.loginNames;
      cb(loginNames);
    },
    handleSelect(item) {
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    async initEmployeeSelect() {
      const returnData = await initEmployeeSelect({});
      this.employeeForSelect = [];
      if (returnData._result) {
        for (let item of returnData.data) {
          const obj = {};
          obj.value = item.id;
          obj.label = item.employeeName;
          this.employeeForSelect.push(obj)
        }
      }
    },
    clearForm() {
      this.loginNameSearch = ''
      this.dictAgentTypeSearch = "";
      this.agentRangeSearch = "";
      this.dictStatusSearch = "NORMAL";
      this.weChatTypeSearch = "";
      this.employeeId = "";
      this.agentNameSearch = null;
      this.telephoneSearch = null;
      this.reviewType = '';
      this.form = {
        region: "",
        telephoneSearch: ""
      }
      sessionStorage.clear();
    },

    // 页面初始化
    async initData(theKey) {
      this.tableLoading = true;
      let obj = {};
      if (this.pid) {
        obj = {
          pid: this.pid,
          account: this.account.name,
          openid: this.weChatTypeSearch,
          employeeId: this.employeeId,
          page: {
            current: this.currentPage + "",
            size: this.pageSize + "",
            ascs: this.ascs,
            descs: this.descs
          }
        }
      } else {
        obj = {
          loginName: this.loginNameSearch,
          dictAgentType: this.dictAgentTypeSearch,
          dictStatus: this.dictStatusSearch,
          agentRange: this.agentRangeSearch,
          telephone: this.form.telephoneSearch,
          account: this.account.name,
          openid: this.weChatTypeSearch,
          employeeId: this.employeeId,
          dictAuditStatus: this.reviewType,
          page: {
            current: this.currentPage + "",
            size: this.pageSize + "",
            ascs: this.ascs,
            descs: this.descs
          }
        }
      }
      const returnData = await userManagement(
        obj,
        {
          obj: this,
          key: "tableLoading;" + theKey
        }
      );
      this.tableData = [];
      this.total = 0;
      if (returnData._result) {
        this.total = returnData.data.total;
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize); // 分页的最大页数
        // 数据回显
        returnData.data.records.map(item => {
         /* const obj = {};
          obj.id = item.id;
          obj.pId = item.pId;
          obj.agentName = item.agentName; // 代理名称
          obj.loginName = item.loginName; // 代理名称
          obj.dictAgentTypeName = item.dictAgentTypeName; // 代理类型
          obj.dictRealNameName = item.dictRealNameName; // 实名类型
          obj.dictStatusName = item.dictStatusName; // 用户状态
          obj.pidName = item.pidName; // 所属关系
          obj.employeeName = item.employeeName; // 业务员
          obj.telephone = item.telephone; // 代理联系电话
          obj.alipayName = item.alipayName; // 支付宝户名
          obj.alipayLoginName = item.alipayLoginName; // 支付宝账号
          obj.openid = item.openid; // openid
          obj.dictAuditStatus = item.dictAuditStatus; // 审核状态
          // obj.cardCount = item.cardCount // 拥有卡数
          obj.balance = item.balance; // 余额
          obj.insertTimeDate = item.insertTimeDate; // 创建时间
          obj.dictStatus = item.dictStatus;
          this.tableData.push(obj);*/
          this.tableData.push(item);
        });
        this.total = returnData.data.total;
        this.tableLoading = false;
        this.setSession()
      }
    },
    //存贮查询条件
    setSession(){
      // let form = {
      //   telephoneSearch: this.form.telephoneSearch,//联系电话
      //   dictStatusSearch: this.dictStatusSearch,//客户状态
      //   dictAgentTypeSearch: this.dictAgentTypeSearch,//客户类型
      //   agentRangeSearch: this.agentRangeSearch,//客户范围
      //   weChatTypeSearch: this.weChatTypeSearch,//秒返绑定
      //   employeeId: this.employeeId,//业务员
      //   loginNameSearch: this.loginNameSearch,//客户账号
      //   reviewType: this.reviewType,//审核状态
      // }
      let form = {}
      if(this.form.telephoneSearch)form.telephoneSearch = this.form.telephoneSearch;//联系电话
      if(this.dictStatusSearch)form.dictStatusSearch = this.dictStatusSearch;//客户状态
      if(this.dictAgentTypeSearch)form.dictAgentTypeSearch = this.dictAgentTypeSearch;//客户类型
      if(this.agentRangeSearch)form.agentRangeSearch = this.agentRangeSearch;//客户范围
      if(this.weChatTypeSearch)form.weChatTypeSearch = this.weChatTypeSearch;//秒返绑定
      if(this.employeeId)form.employeeId = this.employeeId;//业务员
      if(this.loginNameSearch)form.loginNameSearch = this.loginNameSearch;//客户账号
      if(this.reviewType)form.reviewType = this.reviewType;//审核状态
      sessionStorage.setItem(this.$route.path,JSON.stringify(form))
    },
    getSession(obj){
      let item = JSON.parse(obj)
      this.form.telephoneSearch = item.telephoneSearch?item.telephoneSearch:'';//联系电话
      this.dictStatusSearch = item.dictStatusSearch?item.dictStatusSearch:'';//客户状态
      this.dictAgentTypeSearch = item.dictStatusSearch?item.dictAgentTypeSearch:'';//客户类型
      this.agentRangeSearch = item.agentRangeSearch?item.agentRangeSearch:'';//客户范围
      this.weChatTypeSearch = item.weChatTypeSearch?item.weChatTypeSearch:'';//秒返绑定
      this.employeeId = item.employeeId?item.employeeId:'';//业务员
      this.loginNameSearch = item.loginNameSearch?item.loginNameSearch:'';//客户账号
      this.reviewType = item.reviewType?item.reviewType:'';//审核状态

      // this.$forceUpdate();
      this.initData();

    },
    // 查询按钮方法
    searchHandle() {
      this.initData("searchLoading");
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    toEdit(user) {
      if (user != undefined) {
        this.$router.push({path: "/user/edit/" + user.id});
      } else {
        this.$router.push({path: "/user/edit/" + 0});
      }
    },
    toRecord(user) {
      this.$router.push({
        path: "/user/record/" + user.id + "/" + user.loginName
      });
    },
    toRate(user) {
      this.$router.push({
        path: "/user/rate/" + user.id + "/" + user.loginName
      });
    },
    toCard(user) {
      this.$router.push({path: "/user/card/" + user.id});
    },
    showChangePasswordForm(user) {
      this.getPageKey();
      this.agentNameForPassword = user.agentName;
      this.idForPassword = user.id;
      this.operation.resetPassword = true;
    },
    showRechargeForm(user) {
      this.transactionMoney = null;
      this.remark = null;
      this.dictMethod = null;
      this.idForRecharge = user.id;
      this.beforBalance = user.balance;
      this.operation.accountRecharge = true;
    },

    showStopUserForm(user) {
      this.idForStopUser = user.id;
      this.operation.deactivate = true;
    },
    showActiveUserForm(user) {
      this.idForActiveUser = user.id;
      this.operation.activate = true;
    },
    //获取pageKey
    async getPageKey() {
      this.pagekey = await this.$getPageKey();
    },
    async changeUserPassword() {
      this.loading = true;
      const returnData = await changeUserPassword({
        id: this.idForPassword,
      }, {
        pagekey: this.pagekey
      });
      if (returnData._result) {
        this.$message({message: "操作成功", type: "success"});
        this.operation.resetPassword = false;
      }
      this.loading = false;
    },
    async recharge() {
      if(!this.transactionMoney){
        this.$message.error('请填写充值金额');
        return false;
      }
      let reg = /^(-?\d+)(\.[0-9]{1,2})?$/;
      if(!reg.test(this.transactionMoney)){
        this.$message.error('请修改充值金额');
        return false;
      }
      const returnData = await recharge({
        userId: this.idForRecharge,
        dictMethod: this.dictMethod,
        dictTransactionType: this.transactionType,
        transactionMoney: this.transactionMoney,
        beforBalance: this.beforBalance,
        remark: this.remark,

      }, {
        pagekey: this.pagekey
      });
      if (returnData._result) {
        this.$message({message: "操作成功", type: "success"});
        this.operation.accountRecharge = false;
        this.initData();
      }

    },
    async getUser(user) {
      const returnData = await getUser({
        id: user.id
      });
      if (returnData._result) {
        this.personalData.checkAgentName = returnData.data.agentName;
        this.personalData.checkTelephone = returnData.data.telephone;
        this.personalData.checkEmail = returnData.data.email;
        this.personalData.checkAddress = returnData.data.address;
        this.personalData.checkBalance = returnData.data.balance;
        this.personalData.checkDictStatus = returnData.data.dictStatusName;
      }
      this.operation.accountView = true;
    },
    sortChange(column) {
      this.ascs = [];
      this.descs = [];
      if (column.order === "ascending") {
        this.ascs.push(column.prop.slice(0, 13));
      } else {
        this.descs.push(column.prop.slice(0, 13));
      }
      this.initData();
    },

    async stopUser() {
      const returnData = await stopUser({
        id: this.idForStopUser
      });
      if (returnData._result) {
        this.$message({message: "操作成功", type: "success"});
        this.operation.deactivate = false;
        this.initData();
      }
    },

    async activeUser() {
      const returnData = await activeUser({
        id: this.idForActiveUser
      });
      if (returnData._result) {
        this.$message({message: "操作成功", type: "success"});
        this.operation.activate = false;
        this.initData();
      }
    },

    async viewLowerLevel(user) {
      this.pid = user.id;
      const returnData = await userManagement(
        {
          pid: this.pid,
          account: this.account.name,
          page: {
            current: this.currentPage + "",
            size: this.pageSize + "",
            ascs: this.ascs,
            descs: this.descs
          }
        },
        {
          obj: this,
          key: "tableLoading;"
        }
      );
      this.tableData = [];
      if (returnData._result) {
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize); // 分页的最大页数
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {};
          obj.id = item.id;
          obj.pId = item.pId;
          obj.agentName = item.agentName; // 代理名称
          obj.dictAgentTypeName = item.dictAgentTypeName; // 代理类型
          obj.dictRealNameName = item.dictRealNameName; // 实名类型
          obj.dictStatusName = item.dictStatusName; // 用户状态
          obj.pidName = item.pidName; // 所属关系
          obj.employeeName = item.employeeName; // 业务员
          obj.telephone = item.telephone; // 代理联系电话
          obj.alipayName = item.alipayName; // 支付宝户名
          obj.alipayLoginName = item.alipayLoginName; // 支付宝账号
          obj.balance = item.balance; // 余额
          obj.insertTimeDate = item.insertTimeDate; // 创建时间
          obj.loginName = item.loginName;

          this.tableData.push(obj);
        });
        this.tableLoading = false;
      }
    },

    async selectIsOEMFlag() {
      const returnData = await selectIsOEMFlag({});
      if (returnData._result) {
        this.oemFlag = returnData.data.oemFlag;
      }
    },

    async openBatchRechargePermissionForUser(user) {

      this.$confirm('确定为该代理账号开通批量充值权限，代理重新登录系统才会使权限生效', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const returnData = await openBatchRechargePermissionForUser({
          id: user.id
        });
        if (returnData._result) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        });
      });
    },

    async shutDownBatchRechargePermissionForUser(user) {

      this.$confirm('确定为该代理账号关闭批量充值权限，代理重新登录系统才会使权限生效', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const returnData = await shutDownBatchRechargePermissionForUser({
          id: user.id
        });
        if (returnData._result) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        });
      });
    },
    /******************以下为弹窗内设置代理批量充值权限方法************************/
    // open(){
    //   this.showAgentListDialog = true;
    //   this.getAgentSettlementList();
    // },
    //获取所有代理
    async getAgentSettlementList() {
      let loading = this.$loading({
        lock: true,
        text: '代理数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.getElementById('.transformBlock')
      });
      let returnData = await agentListInnit({
        loginName: this.agentForm.loginName,
        dictAgentType: this.agentForm.agentType,
        telephone: this.agentForm.telephone,
      });
      if (returnData.code === 10000) {
        loading.close();
        this.agentSettlementList = [];
        this.num1 = returnData.data.length;
        if (returnData.data && returnData.data.length > 0) {
          for (let item of returnData.data) {
            let obj = {};
            obj.id = item.id;
            obj.label = item.agentName;
            obj.show = true;
            obj.checked = false;
            this.agentSettlementList.push(obj);
          }
          this.showAgentListDialog = true;
        }
      }
    },
    //全选所有代理
    selectAllAgent(val) {
      for (let item of this.agentSettlementList) {
        if (!item.hidden) {
          let c = 'checkbox' + item.id;
          document.getElementById(c).checked = val;
          item.checked = val;
        }
      }

      if (val) {
        this.num2 = this.num1;
      } else {
        this.staticNum()
      }
    },
    selectAllAgentSelect(val) {
      for (let item of this.agentSettlementList) {
        if (item.hidden) {
          item.checked = val;
          let c = 'checked' + item.id;
          document.getElementById(c).checked = val;
        }
      }
      if (val) {
        this.num4 = this.num3;
      } else {
        this.staticNum()
      }
    },
    changeCheckbox(e, item) {
      let checked = e.target.checked;
      let c = 'checkbox' + item.id;
      item.checked = !item.checked;
      document.getElementById(c).checked = checked;
      if (checked) {
        this.num2++
      } else {
        this.num2--
      }
    },
    //右侧全选
    changeSelectbox(e, item) {
      let checked = e.target.checked;
      let c = 'checked' + item.id;
      item.checked = !item.checked;
      document.getElementById(c).checked = checked;
      if (checked) {
        this.num4++
      } else {
        this.num4--
      }
    },
    subList() {
      this.agentSettlementList.forEach((item, index) => {
        if (item.checked && item.hidden) {
          item.hidden = false;
          item.checked = false;
        }
      });
      this.staticNum();
    },
    addList() {
      this.agentSettlementList.forEach(item => {
        if (item.checked && !item.hidden) {
          item.hidden = true;
          item.checked = false;
        }
      });
      this.staticNum()
    },
    staticNum() {
      let g = 0;  //左侧总数
      let i = 0;  //左侧选中数量
      let r = 0;  //右侧总数
      let l = 0;  //右侧被选中数量
      for (let item of this.agentSettlementList) {
        if (!item.hidden) {
          g++;
          if (item.checked) {
            i++
          }
        } else if (item.hidden) {
          r++;
          if (item.checked) {
            l++
          }
        }

      }
      this.num1 = g;
      this.num2 = i;
      this.num3 = r;
      this.num4 = l;
    },
    setPower(val) {
      let userList = [];
      for (let item of this.agentSettlementList) {
        if (item.hidden && item.checked) {
          let obj = {};
          obj.id = item.id;
          userList.push(obj);
        }
      }
      if (userList.length === 0) {
        this.$alert('您尚未选取代理，无法继续执行！', '错误提示', {
          confirmButtonText: '确定',
          type: 'error',
          callback: action => {

          }
        });
        return false;
      }
      let tip = val ? '启用' : '关闭';
      this.$confirm(`您是否要立即${tip}当前选中代理批量充值权限?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let loading = this.$loading({
          lock: true,
          text: '数据提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.getElementById('.transformBlock')
        });
        setAgentbatchRechargPower({
          userList: userList,
          cancelFlag: val
        }).then(res => {
          if (res.code === 10000) {
            this.$message({
              message: '数据提交成功',
              type: 'success'
            })
            this.showAgentListDialog = false;
            this.$refs['agentForm'].resetFields();
            this.num1 = 0;
            this.num2 = 0;
            this.num3 = 0;
            this.num4 = 0;
            this.agentSettlementList = [];
            loading.close();
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${tip}当前选中代理批量充值权限操作`
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">

.el-container {
  .row_search {
    width: 100%;
    height: 40px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: bold;
    padding: 0;

    span {
      width: 80px;
      padding-right: 12px;
    }

  }

  .el-header {
    margin-top: 20px;

    .add {
      display: flex;
      flex-direction: row-reverse;
    }

    .right {
      display: flex;
      flex-direction: row-reverse;
    }

    .hr {
      margin: 8px auto;
    }

    .box {
      position: relative;
      top: -2px;
    }

    .box {
      .el-form-item /deep/ label {
        text-align: left;
      }
    }

    .el-form-item {
      margin-bottom: 20px;
    }

    .transition {
      transition: 0.5s;
    }
  }

  .el-main {
    .el-dropdown-link {
      font-size: 20px;
      cursor: pointer;
    }

    .block {
      float: right;
    }
  }
}

.el-popper[x-placement^="bottom"] {
  margin-right: -39px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0 17px;
  }
}

.el-popper[x-placement^="top"] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -39px;

  button {
    display: block;
  }

  .operation {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0 17px;
  }
}

.accountView {
  .el-dialog__body {
    .el-form-item /deep/ input {
      border: 0;
      cursor: default;
    }
  }
}

.resetPassword /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}

.deactivate /deep/ .el-dialog__body {
  text-align: justify;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}

.cardDetail {
  .el-dialog__body {
    .el-form-item /deep/ input {
      border: 0;
      cursor: default;
    }
  }
}

.cardDetail /deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  height: 80%;

  .el-dialog__body {
    overflow: auto;
  }
}

/*穿梭框*/
.transformBlock {
  width: 100%;
  height: 480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}

.transformTable {
  width: 260px;
  height: 50vh;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.transformHead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 5%;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #dcdfe6;
}

.transformList {
  width: 100%;
  height: calc(50vh - 42px);
  overflow-y: scroll;
}

.transformItem {
  width: 84%;
  height: 30px;
  /*line-height: 30px;*/
  padding: 0 8%;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
  position: relative;
}

.transformItem :hover {
  color: #409eff;
}

.transformItem :active {
  color: #409eff;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  top: 0;
  left: 0;
  border-radius: 3px;
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
  margin-right: 3px;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  border: 1px solid #DCDFE6;
  background: #fff;
  width: 100%;
  height: 100%;
}

input[type="checkbox"]:checked::before {
  /*content:'('url('../../assets/image/select.png')')';*/
  content: (url('../../assets/images/select.png'));
  background: #409eff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #409eff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  margin-right: 5px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;

}

.checkIcon {
  top: 0;
  left: 9.5%;
  color: #fff;
  position: absolute;
  line-height: 30px;
}
.row-block-ddd {
  height: 35px;
  line-height: 35px;
  /*margin: 0 calc(50% - 400px);*/
  position: relative;
  font-size: 14px;
  display: inline-block;
  float: right;
}
.row_top_item {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}
</style>
